<script>
import { GlFormGroup, GlFormInput, GlFormTextarea } from '@gitlab/ui';
import { s__, __ } from '~/locale';
import MarkdownField from '~/vue_shared/components/markdown/field.vue';
import * as i18n from './i18n';

export default {
  components: {
    GlFormGroup,
    GlFormInput,
    GlFormTextarea,
    MarkdownField,
  },
  inject: ['markdownDocsPath', 'markdownPreviewPath'],
  props: {
    validationState: {
      type: Object,
      required: false,
      default: () => ({}),
    },
  },
  data() {
    return {
      isSubmitting: false,
      vulnerabilityName: '',
      vulnerabilityDesc: '',
    };
  },
  methods: {
    emitChanges() {
      this.$emit('change', {
        vulnerabilityName: this.vulnerabilityName,
        vulnerabilityDesc: this.vulnerabilityDesc,
      });
    },
  },
  i18n: {
    errorName: i18n.ERROR_NAME,
    vulnerabilityName: {
      label: __('Name'),
      description: s__(
        'VulnerabilityManagement|Vulnerability name or type. Ex: Cross-site scripting',
      ),
    },
    vulnerabilityDesc: {
      label: __('Description'),
      description: s__(
        'VulnerabilityManagement|Summary, detailed description, steps to reproduce, etc.',
      ),
    },
  },
  restrictedToolBarItems: ['attach-file'],
};
</script>
<template>
  <section>
    <gl-form-group
      :label="$options.i18n.vulnerabilityName.label"
      :description="$options.i18n.vulnerabilityName.description"
      :state="validationState.name"
      :invalid-feedback="$options.i18n.errorName"
      label-for="form-vulnerability-name"
      class="gl-mb-6"
    >
      <gl-form-input
        id="form-vulnerability-name"
        v-model.trim="vulnerabilityName"
        :state="validationState.name"
        type="text"
        @input="emitChanges"
      />
    </gl-form-group>
    <gl-form-group
      :label="$options.i18n.vulnerabilityDesc.label"
      label-for="form-vulnerability-desc"
    >
      <div class="gl-border-solid gl-border-gray-100 gl-border-1 gl-rounded-base">
        <markdown-field
          ref="markdownField"
          :can-attach-file="false"
          :add-spacing-classes="false"
          :markdown-preview-path="markdownPreviewPath"
          :markdown-docs-path="markdownDocsPath"
          :textarea-value="vulnerabilityDesc"
          :is-submitting="isSubmitting"
          :restricted-tool-bar-items="$options.restrictedToolBarItems"
        >
          <template #textarea>
            <gl-form-textarea
              id="form-vulnerability-desc"
              v-model.trim="vulnerabilityDesc"
              rows="8"
              class="gl-shadow-none! gl-py-4! gl-h-auto!"
              :aria-label="$options.i18n.vulnerabilityDesc.description"
              :placeholder="$options.i18n.vulnerabilityDesc.description"
              @input="emitChanges"
            />
          </template>
        </markdown-field>
      </div>
    </gl-form-group>
  </section>
</template>
